<template>
    <div class="index">
        <head-top></head-top>
        <div class="info">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="phone" label="电话">
                </el-table-column>
                <el-table-column  label="是否发送过短信">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.isSend?'是':'否' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="erweima" label="二维码">
                    <div slot-scope="scope" id="qrcode"></div>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button v-if="!scope.row.isSend" @click="handleClick(scope.row,scope.$index)" type="text" size="small">发送短信</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import headTop from "@/components/headTop";
import {userList,sendMsg} from "../server/api.js";
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
    name:'index',
    components: {
        headTop
    },
    created(){
        this.getList(1);
        
    },
    methods:{
        async getList(page){
			let res = await userList({
                            page,
                            rows:10
						})
            console.log(res)
            this.tableData = res.data.map(item=>{
                this.qrcode(item.phone);
                // console.log(item.phone)
                return item
            })
            this.total = res.total
        },
        // handleClick(row,index){
        async handleClick(row,index){
            let res = await sendMsg({
                phone:row.phone
            })
            this.tableData[index].isSend = true
            // this.getList();
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.getList(val);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.getList(val);
        },
        qrcode(phone) {
            let qrcode = new QRCode('qrcode', {
            width: 132,  
            height: 132,
            text: phone, // 二维码地址
            colorDark : "#000",
            colorLight : "#fff",
            })
        },
    }, 
    data(){
        return {
            tableData: [],
            total:200,
        }
    }
}
</script>
<style lang="less">
.index{
    
}
</style>


